<template>
	<section>
		<!--列表-->
		<el-table :data="query" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" width="60" >
			</el-table-column>
			<el-table-column prop="c_problem" label="咨询内容">
			</el-table-column>
			<el-table-column label="操作" width="200">
				<template scope="scope">
					<el-button type="primary" size="small" @click="reply(scope.$index, scope.row)">查看回复</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
        <!-- 查看回复界面 -->
        <el-dialog title="查看回复" v-model="editReplyVisible" :close-on-click-modal="false">
			<el-form :model="editReply" label-width="100px" ref="editReply">
				<el-form-item label="回复内容:">
					{{editReply.c_reply}}
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click.native="editReplyVisible = false">确定</el-button>
			</div>
		</el-dialog>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
			<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="pageNum"
			:page-sizes="[3, 5, 10, 20]"
			:page-size="pageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="total"
			style="float:right;">
			</el-pagination>
		</el-col>

	</section>
</template>
<script>
	import util from '../../common/js/util'
	import { getReply, removeQuery, batchRemoveQuery} from '../../api/api';

	export default {
		data() {
			return {
				query: [],
				total: 0,//列表总条数
				pageNum:1,//当前页码
				pageSize:3,
				listLoading: false,
				sels: [],//列表选中列
                editReplyVisible : false,
                addLoading : false,
                editReply : {
                    c_reply : ''
                }
			}
		},
		methods: {
			handleSizeChange(val) {
				this.pageSize = val;
				this.getQuery();
			},
			handleCurrentChange(val) {
				this.pageNum = val;
				this.getQuery();
			},
			//获取咨询问题列表
			getQuery() {
				var user = sessionStorage.getItem('user');
				user = JSON.parse(user);
				let para = {
					did : user.did,
					status : 1,
					pageSize : this.pageSize,
					pageNum : this.pageNum
				};
				this.listLoading = true;
				getReply(para).then((res) => {
					this.total = res.data.total
					this.query = res.data.list;
					this.listLoading = false;
				});
			},
		    //删除
			handleDel: function (index, row) {
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					let para = { c_id : row.c_id };
					removeQuery(para).then((res) => {
						this.listLoading = false;
						 if (res.code !== 0) {
                                this.$message({
                                message : res.msg,
                                type : 'error'
                                });
                            } else {
                                this.$message({
                                    message : res.msg,
                                    type : 'success'
                            });
                        };
						this.getQuery();
					});
				}).catch(() => {

				});
			},
		    selsChange: function (sels) {
				this.sels = sels;
			},
			//批量删除
			batchRemove: function () {
				var c_id = this.sels.map(item => item.c_id).toString();
				this.$confirm('确认删除选中记录吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					let para = { c_id: c_id };
					batchRemoveQuery(para).then((res) => {
						this.listLoading = false;
						if (res.code !== 0) {
                            this.$message({
                            message : res.msg,
                            type : 'error'
                            });
                        } else {
                            this.$message({
                            message : res.msg,
                            type : 'success'
                        	});
                        };
						this.getQuery();
					});
				}).catch(() => {

				});
			},
            //显示回复界面
            reply:function(index, row){
				this.editReplyVisible = true;
                this.editReply.c_reply = row.c_reply;
            }
		},
		mounted() {
			this.getQuery();
		}
	}

</script>

<style scoped>

</style>